<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 场地详情</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-20 max-w-md mx-auto">
        <div class="gradient-bg px-4 py-3 text-white shadow-lg">
            <div class="flex items-center">
                <button class="w-8 h-8 flex items-center justify-center" onclick="window.history.back()">
                    <i class="fa-solid fa-arrow-left"></i>
                </button>
                <div class="ml-3 flex-1 text-lg font-medium">场地详情</div>
            </div>
        </div>
    </header>
    
    <!-- 页面内容区 -->
    <main class="pt-16 pb-24">
        <!-- 场地图片轮播 -->
        <div class="relative">
            <div class="w-full h-64">
                <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?q=80&w=2000&auto=format&fit=crop" 
                     alt="场地图片" class="w-full h-full object-cover">
            </div>
            <div class="absolute bottom-3 right-3 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full">
                1/5
            </div>
            <!-- 轮播指示器 -->
            <div class="absolute bottom-3 left-0 right-0 flex justify-center space-x-1.5">
                <div class="w-1.5 h-1.5 rounded-full bg-white"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-white opacity-50"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-white opacity-50"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-white opacity-50"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-white opacity-50"></div>
            </div>
        </div>
        
        <!-- 场地基本信息 -->
        <div class="bg-white p-4">
            <h1 class="text-xl font-bold mb-2">和谐瑜伽馆</h1>
            <div class="flex space-x-2 mb-2">
                <span class="text-xs text-gray-500 bg-gray-100 rounded-full px-2 py-0.5">瑜伽</span>
                <span class="text-xs text-gray-500 bg-gray-100 rounded-full px-2 py-0.5">健身</span>
                <span class="text-xs text-gray-500 bg-gray-100 rounded-full px-2 py-0.5">舞蹈</span>
                <span class="text-xs text-gray-500 bg-gray-100 rounded-full px-2 py-0.5">冥想</span>
            </div>
            <div class="flex items-center mb-2">
                <div class="text-yellow-500 flex items-center">
                    <i class="fa-solid fa-star"></i>
                    <span class="ml-1 text-sm font-medium">4.8</span>
                </div>
                <span class="text-xs text-gray-500 ml-2">(92条评价)</span>
            </div>
            <div class="flex items-start mt-2">
                <i class="fa-solid fa-location-dot text-gray-400 mt-0.5"></i>
                <div class="ml-2 flex-1">
                    <div class="text-sm text-gray-600">北京市朝阳区CBD商务区国际大厦2层208室</div>
                    <div class="text-xs text-gray-400 mt-1">距离您 3.2km</div>
                </div>
            </div>
        </div>
        
        <!-- 场地数据 -->
        <div class="bg-white mt-3 flex">
            <div class="flex-1 py-3 text-center border-r border-gray-100">
                <div class="text-primary-dark font-bold">300m²</div>
                <div class="text-xs text-gray-500 mt-1">场地面积</div>
            </div>
            <div class="flex-1 py-3 text-center border-r border-gray-100">
                <div class="text-primary-dark font-bold">25人</div>
                <div class="text-xs text-gray-500 mt-1">容纳人数</div>
            </div>
            <div class="flex-1 py-3 text-center border-r border-gray-100">
                <div class="text-primary-dark font-bold">15</div>
                <div class="text-xs text-gray-500 mt-1">常驻教练</div>
            </div>
            <div class="flex-1 py-3 text-center">
                <div class="text-primary-dark font-bold">4.8</div>
                <div class="text-xs text-gray-500 mt-1">场地评分</div>
            </div>
        </div>
        
        <!-- 场地介绍 -->
        <div class="bg-white mt-3 p-4">
            <div class="flex items-center mb-3">
                <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                <h2 class="text-lg font-bold">场地介绍</h2>
            </div>
            <p class="text-sm text-gray-600 leading-relaxed">
                和谐瑜伽馆位于朝阳区CBD核心商圈，交通便利，环境优雅。场馆面积300平米，设有大型团体课教室、私教空间和休息区。馆内配备专业瑜伽设备和环保材质地板，并采用先进的空气净化系统，为会员提供舒适纯净的练习环境。我们提供多种类型的课程，包括哈他瑜伽、阴瑜伽、流瑜伽、理疗瑜伽等，满足不同会员的需求。
            </p>
        </div>
        
        <!-- 场地设施 -->
        <div class="bg-white mt-3 p-4">
            <div class="flex items-center mb-3">
                <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                <h2 class="text-lg font-bold">场地设施</h2>
            </div>
            <div class="grid grid-cols-3 gap-3">
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">更衣室</span>
                </div>
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">储物柜</span>
                </div>
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">淋浴间</span>
                </div>
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">瑜伽垫</span>
                </div>
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">空调</span>
                </div>
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">休息区</span>
                </div>
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">Wi-Fi</span>
                </div>
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">停车场</span>
                </div>
                <div class="flex items-center">
                    <i class="fa-solid fa-check text-primary-dark mr-2"></i>
                    <span class="text-sm">净水器</span>
                </div>
            </div>
        </div>
        
        <!-- 热门服务 -->
        <div class="bg-white mt-3 p-4">
            <div class="flex items-center mb-3">
                <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                <h2 class="text-lg font-bold">热门服务</h2>
            </div>
            
            <div class="space-y-4">
                <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
                            <i class="fa-solid fa-users"></i>
                        </div>
                        <div class="ml-3">
                            <div class="text-sm font-medium">场地租用（整场）</div>
                            <div class="text-xs text-gray-500">可用于团体课、活动、工作坊等</div>
                        </div>
                    </div>
                    <div class="text-primary-dark font-medium">¥500/小时</div>
                </div>
                
                <button class="mt-1 px-3 py-1.5 bg-primary-light text-white text-xs rounded-full ml-auto block" onclick="window.location.href='venue_booking_confirm.html'">
                    立即预约
                </button>
                
                <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 mt-3">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
                            <i class="fa-solid fa-person-chalkboard"></i>
                        </div>
                        <div class="ml-3">
                            <div class="text-sm font-medium">小型教室租用</div>
                            <div class="text-xs text-gray-500">最多容纳8人，适合小班课或私教</div>
                        </div>
                    </div>
                    <div class="text-primary-dark font-medium">¥200/小时</div>
                </div>
                
                <button class="mt-1 px-3 py-1.5 bg-primary-light text-white text-xs rounded-full ml-auto block" onclick="window.location.href='venue_booking_confirm.html'">
                    立即预约
                </button>
                
                <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 mt-3">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
                            <i class="fa-solid fa-user-group"></i>
                        </div>
                        <div class="ml-3">
                            <div class="text-sm font-medium">团体课程预约</div>
                            <div class="text-xs text-gray-500">多种团课可选，专业教师指导</div>
                        </div>
                    </div>
                    <div class="text-primary-dark font-medium">¥80/人次</div>
                </div>
                
                <button class="mt-1 px-3 py-1.5 bg-primary-light text-white text-xs rounded-full ml-auto block" onclick="window.location.href='venue_booking_confirm.html'">
                    立即预约
                </button>
            </div>
        </div>
        
        <!-- 用户评价 -->
        <div class="bg-white mt-3 p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                    <h2 class="text-lg font-bold">用户评价</h2>
                </div>
                <div class="flex items-center">
                    <div class="text-yellow-500 text-sm mr-1">4.8</div>
                    <div class="text-yellow-500"><i class="fa-solid fa-star"></i></div>
                </div>
            </div>
            
            <div class="space-y-4">
                <div class="border-b border-gray-100 pb-3">
                    <div class="flex justify-between mb-2">
                        <div class="flex items-center">
                            <div class="w-7 h-7 rounded-full bg-gray-200 overflow-hidden"></div>
                            <div class="ml-2 text-sm font-medium">王**</div>
                        </div>
                        <div class="text-xs text-gray-500">2023-06-02</div>
                    </div>
                    <div class="flex text-yellow-500 text-xs mb-2">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                    </div>
                    <p class="text-sm text-gray-600">环境非常好，设施齐全，教练专业素质高，上完课心情愉悦，很推荐。</p>
                </div>
                
                <div class="border-b border-gray-100 pb-3">
                    <div class="flex justify-between mb-2">
                        <div class="flex items-center">
                            <div class="w-7 h-7 rounded-full bg-gray-200 overflow-hidden"></div>
                            <div class="ml-2 text-sm font-medium">张**</div>
                        </div>
                        <div class="text-xs text-gray-500">2023-05-28</div>
                    </div>
                    <div class="flex text-yellow-500 text-xs mb-2">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                    </div>
                    <p class="text-sm text-gray-600">场地干净整洁，空间宽敞明亮，淋浴间和更衣室也很干净，位置也很便利，下班后很方便过来。</p>
                </div>
                
                <div>
                    <div class="flex justify-between mb-2">
                        <div class="flex items-center">
                            <div class="w-7 h-7 rounded-full bg-gray-200 overflow-hidden"></div>
                            <div class="ml-2 text-sm font-medium">李**</div>
                        </div>
                        <div class="text-xs text-gray-500">2023-05-20</div>
                    </div>
                    <div class="flex text-yellow-500 text-xs mb-2">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-regular fa-star"></i>
                    </div>
                    <p class="text-sm text-gray-600">课程种类多样，环境不错，就是高峰时期人有点多，建议提前预约。</p>
                </div>
                
                <button class="w-full py-2 text-center text-sm text-primary-dark">查看更多评价</button>
            </div>
        </div>
    </main>
    
    <!-- 底部固定栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-3 flex items-center justify-between max-w-md mx-auto z-10">
        <div class="flex items-center">
            <button class="w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center mr-4">
                <i class="fa-regular fa-heart text-gray-500"></i>
            </button>
            <button class="w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center">
                <i class="fa-solid fa-share-nodes text-gray-500"></i>
            </button>
        </div>
        
        <div class="flex items-center">
            <div class="mr-3">
                <div class="font-bold text-primary-dark">¥150</div>
                <div class="text-xs text-gray-500">起/小时</div>
            </div>
            <button class="gradient-bg text-white rounded-full px-6 py-2.5 text-sm font-medium" onclick="window.location.href='venue_booking_confirm.html'">
                立即预约
            </button>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-1.5 z-20 max-w-md mx-auto hidden">
        <div class="flex justify-around items-center">
            <a href="index.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-house text-xl mb-0.5"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="coach.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-user-tie text-xl mb-0.5"></i>
                <span class="text-xs">教练</span>
            </a>
            <a href="venue.html" class="flex flex-col items-center w-1/5 text-primary-dark">
                <div class="flex-1 flex flex-col items-center">
                    <i class="fa-solid fa-building text-gray-500 text-xl mb-1"></i>
                    <span class="text-xs font-medium">空间</span>
                </div>
            </a>
            <a href="service.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-clipboard-list text-xl mb-0.5"></i>
                <span class="text-xs">服务</span>
            </a>
            <a href="my.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-user text-xl mb-0.5"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </nav>
</body>
</html> 